<template>
  <div class="center-left">
    <div class="container">
      <!-- 热门推荐 -->
      <div class="box">
        <Title :title="hot" :minlist="minlist"></Title>
        <!-- 热门推荐内容 -->
        <HotList></HotList>
      </div>
      <!-- 新碟上架 -->
      <div class="box">
        <Title :title="newDisc"></Title>
        <NewDiscSlide></NewDiscSlide>
      </div>
      <!-- 榜单 -->
      <div class="box">
        <Title :title="pluto"></Title>
        <SongList></SongList>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title.vue'
import HotList from '@/components/HotList.vue'
import NewDiscSlide from '@/components/NewDiscSlide.vue'
import SongList from '@/components/SongList.vue'
export default {
  name: 'ContainerLeft',
  components: {
    Title,
    HotList,
    NewDiscSlide,
    SongList
  },
  data() {
    return {
      hot: '热门推荐',
      newDisc: '新碟上架',
      pluto: '榜单',
      minlist: true,
      results: {},
      url: 'https://p1.music.126.net/_gMDRNW8RoCvJWHi_p51aA==/109951164726735349.jpg'
    }
  }
}
</script>

<style scoped>
.center-left {
  width: 729px;
  height: 1425px;
  padding: 20px 20px 40px;
  box-sizing: border-box;
}
.title {
  width: 689px;
  height: 35px;
}
.box {
  margin-bottom: 50px;
}
</style>
